<template>
  <div
    class=""
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
  >
    <el-row>
      <el-col :span="24">
        <aps-form
          :config="apsForm.formConfig"
          :model="apsForm.formData"
          :formRef="apsForm.formRef"
          :labelWidth="apsForm.labelWidth"
          ref="form"
        ></aps-form>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="10" style="margin-bottom: 10px">
      <el-col :span="8">
        <Title name="最新天气情况" :line="false">
          <el-row>
            <el-col :span="12">
              <environmentGaugechart
                v-if="Object.keys(chartData1).length > 0"
                ref="environmentGaugechart1"
                :chartData="chartData1"
              />
            </el-col>
            <el-col :span="12">
              <environmentGaugechart
                v-if="Object.keys(chartData2).length > 0"
                ref="environmentGaugechart2"
                :chartData="chartData2"
              />
            </el-col>
          </el-row>
        </Title>
      </el-col>
      <el-col :span="8">
        <Title name="历史温度" :line="false">
          <environmentLinechart :chartData="lineData" />
        </Title>
      </el-col>
      <el-col :span="8">
        <Title name="历史空气质量" :line="false">
          <environmentLinechart2 :chartData="lineData2" unit="μg/m3" />
        </Title>
      </el-col>
    </el-row> -->
    <lb-table
      ref="table"
      :column="tableData.column"
      :data="tableData.data"
      height="680"
      background
      border
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :pager-count="5"
      :current-page.sync="currentPage"
      :total="total"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @p-current-change="handleCurrentChange"
    >
    </lb-table>
  </div>
</template>

<script>
import environmentGaugechart from "@/views/statistics/energy/components/behaviorC/environmentGaugechart.vue";
import environmentLinechart from "@/views/statistics/energy/components/behaviorC/environmentLinechart.vue";
import environmentLinechart2 from "@/views/statistics/energy/components/behaviorC/environmentLinechart2.vue";
import { getWeatherInfo, getHisWeatherInfo } from "@/api/iot/environment.js";
export default {
  components: {
    environmentGaugechart,
    environmentLinechart,
    environmentLinechart2,
  },
  data() {
    return {
      apsForm: {
        formRef: "form",
        labelWidth: "auto",
        formData: {},
        formConfig: {
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {
            //这里是渲染查询表单的表头和类型的数据
            yearMonthDate: {
              label:"日期:",
              typeName: "el-date-picker",
              type: "date",
              "value-format": "yyyy-MM-dd",
              placeholder: "请选择日期",
            },
            // name: {
            //   typeName: "el-input",
            //   clearable: true,
            //   placeholder: "查询条件",
            // },
          },
          formSoltButton: [
            {
              label: "搜索",
              type: "primary",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-search",
              click: this.handlerSearchDetail,
            },
            {
              label: "重置",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-refresh-left",
              click: this.handleReset,
            },
          ],
        },
      },
      chartData1: {},
      chartData2: {},
      lineData: {
        xAxisData: ["00:00"],
        seriesData: [0],
        markLineData: [
          { name: 0, yAxis: 0, label: { show: true, color: "red" } },
          { name: 1, yAxis: 0, label: { show: true, color: "#333" } },
          { name: 2, yAxis: 0, label: { show: true, color: "green" } },
        ],
      },
      lineData2: {
        xAxisData: ["00:00"],
        seriesData: [0],
        markLineData: [
          { name: 0, yAxis: 0, label: { show: true, color: "red" } },
          { name: 1, yAxis: 0, label: { show: true, color: "#333" } },
          { name: 2, yAxis: 0, label: { show: true, color: "green" } },
        ],
      },
      tableData: {
        column: [
          {
            prop: "temperature_time",
            label: "采集日期",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "weather",
            label: "天气",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "temperature",
            label: "气温（°C）",
            align: "center",
            showOverflowTooltip: true,
            // render: (h, scope) => {
            //   let a = scope.row.temperature + "°C";
            //   return <div>{a}</div>;
            // },
          },
          {
            prop: "aqi",
            label: "空气质量（μg/m3）",
            align: "center",
            showOverflowTooltip: true,
          },
        ],
        data: [],
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created() {
    // this.getGaugedata();
  },
  mounted() {
    this.getLocaldate();
    this.handlerSearchDetail();
  },
  methods: {
    // 获取今天的日期
    getLocaldate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      var today = year + "-" + month + "-" + day;
      this.$refs?.form?.setFieldValue("yearMonthDate", today);
      // this.$refs?.form?.setFieldValue("yearMonthDate", "2022-11-29");
    },
    handlerSearchDetail() {
      let queryParams = this.$refs?.form?.getFieldsValue();
      // queryParams.pageSize = this.pageSize;
      // queryParams.pageNum = this.currentPage;
      // console.log(queryParams, "qqcs");
      getHisWeatherInfo(queryParams)
        .then((res) => {
          // console.log(res);
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          this.tableData.data = arr;
          let xAxisData = [];
          let temperatureArr = [];
          let aqiArr = [];
          if (arr.length > 0) {
            arr.map((item) => {
              xAxisData.push(item?.temperature_time ?? "时刻");
              temperatureArr.push(item?.temperature ?? 0);
              aqiArr.push(item?.aqi ?? "0");
            });
          }
          // this.getlineData(xAxisData, temperatureArr);
          // this.getlineData2(xAxisData, aqiArr);
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200401");
        });
    },
    getGaugedata() {
      this.chartData1 = {};
      this.chartData2 = {};
      getWeatherInfo({})
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let temperature = res?.data?.temperature ?? 0;
          let aqi = res?.data?.aqi ?? 0;
          this.chartData1 = {
            name: "温度",
            data: temperature,
            unit: "°C",
            min: -20,
            max: 60,
            id: "environmentGaugechart1",
          };
          this.chartData2 = {
            name: "空气质量",
            data: aqi,
            unit: "μg/m3",
            min: 0,
            max: 200,
            id: "environmentGaugechart2",
          };
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200400");
        });
    },
    getlineData(xAxisData, seriesData) {
      let max, min, avg;
      let sum = 0;
      if (seriesData.length > 0) {
        max = Math.max.apply(null, seriesData);
        min = Math.min.apply(null, seriesData);
        seriesData.map((item) => {
          sum += item;
        });
        avg = sum / seriesData.length;
      } else {
        max = 0;
        min = 0;
        avg = 0;
      }
      this.lineData = {
        xAxisData: xAxisData.length > 0 ? xAxisData : ["00:00"],
        seriesData: seriesData.length > 0 ? seriesData : [0],
        markLineData: [
          { name: 0, yAxis: max, label: { show: true, color: "red" } },
          { name: 1, yAxis: min, label: { show: true, color: "#333" } },
          { name: 2, yAxis: avg, label: { show: true, color: "green" } },
        ],
      };
    },
    getlineData2(xAxisData, seriesData) {
      let max, min, avg;
      let seriesDataArr = [];
      let sum = 0;
      if (seriesData.length > 0) {
        seriesData.map((item) => {
          if (typeof item == "string") {
            item = Number(item);
          }
          sum += item;
          seriesDataArr.push(item);
        });
        max = Math.max.apply(null, seriesDataArr);
        min = Math.min.apply(null, seriesDataArr);
        avg = sum / seriesDataArr.length;
      } else {
        max = 0;
        min = 0;
        avg = 0;
      }
      this.lineData2 = {
        xAxisData: xAxisData.length > 0 ? xAxisData : ["00:00"],
        seriesData: seriesData.length > 0 ? seriesData : [0],
        markLineData: [
          { name: 0, yAxis: max, label: { show: true, color: "red" } },
          { name: 1, yAxis: min, label: { show: true, color: "#333" } },
          { name: 2, yAxis: avg, label: { show: true, color: "green" } },
        ],
      };
    },
    handleReset() {
      this.$refs?.form?.resetFields();
      this.getLocaldate();
      this.handlerSearchDetail();
      this.getGaugedata();
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.handlerSearchDetail();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handlerSearchDetail();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
